<template>
    <div class="flex-row">
        <div class="l-box flex-column">
            <div class="l-1 flex-row">
                <div class="card-item flex-column flex-center w-color mr10" :style="{'background-image':'url(/icons/b'+(i+1)+'.png)'}" v-for="(v,i) in cardList" :key="i">
                    <div class="large-size mb2">{{v.title}}</div>
                    <div class="size-30 weight mb10">{{v.num}}</div>
                    <span v-if="v.add">
                        <span class="base-size mr5">今日</span>
                        <span class="large-size weight">{{v.add>0?'+':'-'}}{{v.add}}</span>
                    </span>
                </div>
            </div>
            <div class="flex-row mt20">
                <div class="l-2 flex-column mr20">
                    <div class="l-2-1 w-bg shadow radiu10 hidden mb20">
                        <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">人才统计</span></div>
                        <div ref="l_1_1_Chart" class="pt10 pb10" style="width: 580px; height: 245px;"></div>
                    </div>
                    <div class="l-2-2 w-bg shadow radiu10 hidden">
                        <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">新能源发电监测统计</span></div>
                        <div ref="l_1_2_Chart" class="pd20-row" style="width: 580px; height: 230px;"></div>
                    </div>
                </div>
                <div class="l-3 flex-column w-bg shadow radiu10 hidden">
                    <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">全平台访问次数</span></div>
                    <div class="mini-label flex-row-center base-size base-color weight pd20-row">企业网站</div>
                    <div class="l-3-1">
                        <div ref="l_3_1_Chart" class="l-3-1-con pd20-row"></div>
                    </div>
                    <div class="mini-label flex-row-center base-size base-color weight pd20-row">物管系统</div>
                    <div class="l-3-2">
                        <div ref="l_3_2_Chart" class="l-3-2-con pd20-row"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="r-box flex-column ml10">
            <div class="r-1 w-bg shadow radiu10 hidden mb20">
                <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">消息通知</span></div>
                <div class="r-1-con flex-column pd20-row pd10-column">
                    <div class="flex-row-center" v-for="(v,i) in r1List" :key="i">
                        <span class="spot mr5"></span>
                        <span class="base-size mr5">{{v.title}}</span>
                        <!-- <span class="large-size weight base-color">{{v.num}}</span> -->
                    </div>
                </div>
            </div>
            <div class="r-2 w-bg shadow radiu10 hidden mb20">
                <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">园区设备连线状态监控</span></div>
                <div class="r-2-con flex-column pd20-row">
                    <div class="state-box flex-row">
                        <div class="flex-column-center flex-1">
                            <el-image class="image" src="/icons/a6.png" fit="over"></el-image>
                            <div class="flex-column-center success weight">
                                <span class="">在线</span>
                                <span class="48BC15">5</span>
                            </div>
                        </div>
                        <div class="flex-column-center flex-1">
                            <el-image class="image" src="/icons/a7.png" fit="over"></el-image>
                            <div class="flex-column-center error weight">
                                <span>异常</span>
                                <span>2</span>
                            </div>
                        </div>
                    </div>
                    <div class="table">
                        <ul class="head">
                            <li class="liflex">园区</li>
                            <li class="liflex">状态</li>
                            <li class="liflex">时间/详情</li>
                        </ul>
                        <div class="body">
                            <ul v-for="x in 4" :key="x">
                                <li class="liflex">军鼎</li>
                                <li class="liflex error">异常</li>
                                <li class="liflex error">服务断开</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="r-3 w-bg shadow radiu10 hidden">
                <div class="label flex-row-center pd20-row"><div class="line mr10"></div> <span class="big-size weight base-color">系统运维异常信息</span></div>
                <div class="r-3-con flex-column pd20-row pt10">
                    <div class="table">
                        <ul class="head">
                            <li class="liflex">分类</li>
                            <li class="liflex">时间</li>
                            <li class="liflex">详情</li>
                        </ul>
                        <div class="body">
                            <ul v-for="x in 4" :key="x">
                                <li class="liflex">系统服务</li>
                                <li class="liflex error">异常</li>
                                <li class="liflex error">服务断开</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw,onMounted,nextTick } from 'vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        cardList: [
            {title: '平台信息统计',num: '300,000',add: 0},{title: '园区统计',num: '38228',add: 0},
            {title: '企业统计',num: '14465',add: 0}
        ],
        r1List: [
            {title: '预警信息xxxxxxxxxxxx',num: '23568',add: 0},{title: '最新发布信息xxxxxxxxxxxxxxx',num: '23568',add: 2},
            {title: '预警信息xxxxx',num: '23568',add: 2},
        ]
    });

    onMounted(() => {
        set_l_1_1()
        set_l_1_2()
        set_l_3_1()
        set_l_3_2()
    })

    let set_l_1_1 = ()=>{
        let l_1_1_Chart = proxy.$echarts.init(proxy.$refs["l_1_1_Chart"]);
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                data: [
                    '职业1',
                    '职业2',
                    '职业3',
                    '职业4',
                    '职业5',
                ]
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['45%', '60%'],
                    center: ['50%', '50%'],
                    top: '50px',
                    labelLine: {
                        length: 30
                    },
                    label: {
                        formatter: '{d}%',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderRadius: 4,
                        rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                        }
                    },
                    data: [
                        { value: 1048, name: '职业1' },
                        { value: 335, name: '职业2' },
                        { value: 310, name: '职业3' },
                        { value: 251, name: '职业4' },
                        { value: 234, name: '职业5' },
                    ]
                }
            ]
        };
        option && l_1_1_Chart.setOption(option);
    }

    let set_l_1_2 = ()=>{
        let l_1_2_Chart = proxy.$echarts.init(proxy.$refs["l_1_2_Chart"]);
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#1f2b4f'
                    }
                }
            },
            xAxis: {
                offset:20,
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                // splitLine: {show: false}
                
            },
            yAxis: {
                name:'',
                offset:20,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#999999', // 字体颜色
                        fontSize: 12, // 刻度字体大小, // 字体颜色
                        fontWeight: 200
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#e0e0e0'],
                        opacity: 0.6,
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            grid: {
                top:'20px',
                left: '20px',
                right: '20px',
                bottom: '40px',
                containLabel: true
            },
            series: [
                {
                    data: [660, 1200, 901, 800, 1800, 1330, 1560],
                    type: 'line',
                    smooth: true,
                    areaStyle: {//区域填充渐变颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(70, 107, 237, 0)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(41, 47, 127, 0.0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        };
        option && l_1_2_Chart.setOption(option);
    }

    let set_l_3_1 = ()=>{
        let l_3_1_Chart = proxy.$echarts.init(proxy.$refs["l_3_1_Chart"]);
        let option = {
            color: ['#6E9EFF'],
            xAxis: {
                type: 'category',
                data: ['0504', '0505', '0506', '0507', '0508', '0509', '0510']
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                top:'20px',
                left: '20px',
                right: '20px',
                bottom: '20px',
                containLabel: true
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        emphasis: {
                            barBorderRadius:[10, 10, 10, 10],
                        },
                        normal: {
                            barBorderRadius:[10, 10, 10, 10],
                        }
                    }
                }
            ]
        }
        option && l_3_1_Chart.setOption(option);
    }

    let set_l_3_2 = ()=>{
        let l_3_2_Chart = proxy.$echarts.init(proxy.$refs["l_3_2_Chart"]);
        let option = {
            color: ['#DD88FE'],
            xAxis: {
                type: 'category',
                data: ['0504', '0505', '0506', '0507', '0508', '0509', '0510']
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                top:'20px',
                left: '20px',
                right: '20px',
                bottom: '20px',
                containLabel: true
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        emphasis: {
                            barBorderRadius:[10, 10, 10, 10],
                        },
                        normal: {
                            barBorderRadius:[10, 10, 10, 10],
                        }
                    }
                }
            ]
        }
        option && l_3_2_Chart.setOption(option);
    }

    let { cardList, r1List } = toRefs(obj)

</script>

<style lang="scss" scoped>
.r-box{width: 380px;min-width: 380px;}
.l-2-1{width: 580px;height: 305px;}
.l-2-2{width: 580px;height: 290px;}
.l-3{width: 580px;height: 615px;}
.l-3-1{width: 580px;height: 237px;}
.l-3-2{width: 580px;height: 237px;}
.l-3-1-con,.l-3-2-con{width: 580px;height: 237px;}

.r-1{width: 100%;height: 170px;}
.r-2{width: 100%;height: 355px;}
.r-3{width: 100%;height: 240px;}
.r-1-con{width: 100%;height: 110px;justify-content: space-between;}
.r-2-con{width: 100%;height: 295px;}
.r-3-con{width: 100%;height: 180px;}

.card-item{
    width: 386px;height: 170px;background-size: 386px 170px;background-repeat: no-repeat; padding: 20px 20px 20px 20px;box-sizing: border-box;
}
.label{
    width: 100%;height: 60px;background: #D6E6FF;.line{width: 4px;height: 16px;background: #0F49B5;border-radius: 2px;margin-top: 2px;}
}

.state-box{
    .image{width: 50px;height: 50px;}
}
.success{ color: #48BC15;}.error{ color: #FF5A00;}
.spot{
    width: 10px;height: 10px;background: #FF5A00;border-radius: 50%;
}
.table .head { min-height: 40px; height: 40px; background-color: #F3F8FF; color:#333333;}
.table ul { height: 40px; }
.mini-label{height: 40px;}
</style>